<template>
  <div class="personal-info-container">
    <div class="personal-information information-container">
      <div class="title">
        *Personal Information
      </div>
      <a-form
        id="formLogin"
        ref="formLogin"
        :form="form"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 16 }"
        @submit="handleSubmit"
      >
        <div class="infos-container">
          <a-form-item
            style="margin-bottom:0;"
            :wrapper-col="{ span: 24 }"
          >
            <a-form-item
              :label-col="{ span: 14 }"
              :wrapper-col="{ span: 10 }"
              label="First Name:"
              :colon="false"
              :style="{ display: 'inline-block', width: 'calc(55% - 20px)', 'margin': '0 20px' }"
              class="form-item-col"
            >
              <a-input
                v-decorator.trim="[
                  'first_name',
                  {
                    initialValue: currentUser.first_name,
                    rules: [
                      formRules.required('Incorrect first name invalid'),
                      formRules.letter('Incorrect first name invalid')
                    ],
                    validateFirst: true,
                    validateTrigger: 'change'
                  },
                ]"
                disabled
                type="text"
                placeholder="First Name"
              />
            </a-form-item>

            <a-form-item
              label="Last Name:"
              :colon="false"
              :style="{ display: 'inline-block', width: 'calc(45% - 20px)' }"
              class="form-item-col"
              :label-col="{ span: 14 }"
              :wrapper-col="{ span: 10 }"
            >
              <a-input
                v-decorator.trim="[
                  'last_name',
                  {
                    initialValue: currentUser.last_name,
                    rules: [
                      formRules.required('Incorrect last name invalid'),
                      formRules.letter('Incorrect last name invalid')
                    ],
                    validateFirst: true,
                    validateTrigger: 'change'
                  }
                ]"
                disabled
                type="text"
                placeholder="lastName"
              />
            </a-form-item>
          </a-form-item>

          <a-form-item
            label="Date Of Birth:"
            :colon="false"
          >
            <a-date-picker
              v-decorator.trim="[
                'birthday',
                {
                  initialValue: currentUser.birthday,
                  rules: [
                    formRules.required('Incorrect date of birth invalid'),
                  ],
                  validateTrigger: 'change'
                }
              ]"
              format="DD/MM/YYYY"
              value-format="DD/MM/YYYY"
              placeholder="Birthday"
            />
          </a-form-item>

          <a-form-item
            label="Gender:"
            :colon="false"
          >
            <a-radio-group
              v-decorator.trim="[
                'gender',
                {
                  initialValue: currentUser.gender,
                  rules: [
                    formRules.required('Incorrect gender invalid'),
                  ],
                  validateTrigger: 'change'
                }
              ]"
            >
              <a-radio value="1">
                M
              </a-radio>
              <a-radio value="2">
                F
              </a-radio>
            </a-radio-group>
          </a-form-item>

          <!-- 地址 -->
          <Address :form="form" />

          <a-form-item
            label="Driver Licence No:"
            :colon="false"
          >
            <a-input
              v-decorator.trim="[
                'driver_licence_number',
                {
                  initialValue: currentUser.driver_licence_number,
                  rules: [
                    formRules.required(`Incorrect driver's license number invalid`),
                  ],
                  validateFirst: true,
                  validateTrigger: 'change'
                }
              ]"
              type="text"
              placeholder="Driver Licence No"
            />
            <!-- formRules.driver(`Incorrect driver's license number invalid`), -->
          </a-form-item>

          <a-form-item
            label="Licence Expiry:"
            :colon="false"
          >
            <!-- driver_expire_date -->
            <a-date-picker
              v-decorator.trim="[
                'driver_expire_date',
                {
                  initialValue: currentUser.driver_expire_date,
                  rules: [
                    formRules.required('Incorrect date of birth invalid'),
                  ],
                  validateTrigger: 'change'
                }
              ]"
              format="DD/MM/YYYY"
              value-format="DD/MM/YYYY"
              placeholder="Licence Expiry"
            />
            <!-- <a-input
              v-decorator.trim="[
                'license_of',
                {
                  rules: [
                    formRules.required(`Incorrect validity period of driver's license invalid`),
                  ],
                  validateTrigger: 'change'
                }
              ]"
              type="text"
              placeholder="Validity Period of Driver's License"
            /> -->
          </a-form-item>

          <a-form-item
            label="Licence Issued By:"
            :colon="false"
          >
            <a-select
              v-decorator.trim="[
                'driver_state',
                {
                  initialValue: currentUser.driver_state,
                  rules: [
                    formRules.required(`Incorrect driver's license lssuance place invalid`),
                  ],
                  validateTrigger: 'change'
                }
              ]"
              placeholder="Licence Issued By"
            >
              <a-select-option
                v-for="province in ausState"
                :key="province.name_en"
              >
                {{ province.name_en }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </div>

        <div class="button-container">
          <a-button
            class="submit-button"
            html-type="submit"
            type="primary"
            size="large"
            shape="round"
            :loading="formLoading"
            @click="handleSubmit"
          >
            Submit
          </a-button>
        </div>
      </a-form>
    </div>
  </div>
</template>

<script>
import formRules from '@/utils/form/rules';
import form from '../form';
import australia from '@/utils/australia.json';
import { mapGetters } from 'vuex';
import Address from './Address.vue';

export default {
  mixins: [form],

  components: {
    Address
  },

  data() {
    return {
      formRules,
      ausState: australia.childrens,
      ausDistrictAndZipCode: ((australia.childrens[0]?.childrens) || [])
    };
  },

  computed: {
    ...mapGetters(['currentUser'])
  }
};
</script>

<style lang="scss" scoped>
.personal-information {
  .ant-form-item {
    margin-bottom: $margin-xs;
    .ant-form-item-label {
      line-height: $line-height-xs;
    }
  }
  padding: 32px 70px 20px 90px;
  & > .title {
    margin-bottom: $margin-xs;
  }
  .infos-container {
    padding-left: 6px!important;
    padding-right: 280px!important;
  }

  .button-container {
    display: flex;
    justify-content: center;
    .submit-button {
      width: 420px;
      margin-top: $margin-md;
    }
  }
}

@media (max-width: $screen-lg) {
  .personal-information {
    padding: $padding-xs;
    .infos-container {
      padding-left: 6px!important;
      padding-right: 0px!important;
    }
  }
}
</style>
